<template>
  <div ref="dom" class="charts chart-china"></div>
</template>

<script>
import echarts from "echarts"
import echartsGL from "echarts-gl"
import tdTheme from "../theme.json"
import { on, off } from "@/libs/tools"
import "../../../../node_modules/echarts/map/js/china.js"
import "../../../../node_modules/echarts/map/js/china.js"
import "../../../../node_modules/echarts/map/js/province/anhui.js"
import "../../../../node_modules/echarts/map/js/province/aomen.js"
import "../../../../node_modules/echarts/map/js/province/beijing.js"
import "../../../../node_modules/echarts/map/js/province/chongqing.js"
import "../../../../node_modules/echarts/map/js/province/fujian.js"
import "../../../../node_modules/echarts/map/js/province/gansu.js"
import "../../../../node_modules/echarts/map/js/province/guangdong.js"
import "../../../../node_modules/echarts/map/js/province/guangxi.js"
import "../../../../node_modules/echarts/map/js/province/guizhou.js"
import "../../../../node_modules/echarts/map/js/province/hainan.js"
import "../../../../node_modules/echarts/map/js/province/hebei.js"
import "../../../../node_modules/echarts/map/js/province/heilongjiang.js"
import "../../../../node_modules/echarts/map/js/province/henan.js"
import "../../../../node_modules/echarts/map/js/province/hubei.js"
import "../../../../node_modules/echarts/map/js/province/hunan.js"
import "../../../../node_modules/echarts/map/js/province/jiangsu.js"
import "../../../../node_modules/echarts/map/js/province/jiangxi.js"
import "../../../../node_modules/echarts/map/js/province/jilin.js"
import "../../../../node_modules/echarts/map/js/province/liaoning.js"
import "../../../../node_modules/echarts/map/js/province/neimenggu.js"
import "../../../../node_modules/echarts/map/js/province/ningxia.js"
import "../../../../node_modules/echarts/map/js/province/qinghai.js"
import "../../../../node_modules/echarts/map/js/province/shandong.js"
import "../../../../node_modules/echarts/map/js/province/shanghai.js"
import "../../../../node_modules/echarts/map/js/province/shanxi.js"
import "../../../../node_modules/echarts/map/js/province/shanxi1.js"
import "../../../../node_modules/echarts/map/js/province/sichuan.js"
import "../../../../node_modules/echarts/map/js/province/taiwan.js"
import "../../../../node_modules/echarts/map/js/province/tianjin.js"
import "../../../../node_modules/echarts/map/js/province/xianggang.js"
import "../../../../node_modules/echarts/map/js/province/xinjiang.js"
import "../../../../node_modules/echarts/map/js/province/xizang.js"
import "../../../../node_modules/echarts/map/js/province/yunnan.js"
import "../../../../node_modules/echarts/map/js/province/zhejiang.js"
// import { Coordinates, CityCP } from '../city.js'
// import _cloneDeep from 'clone-deep'
echarts.registerTheme("tdTheme", tdTheme)
import Mixin from '../mixin.js'

export default {
  name: "china-map",

  props: {
    mapName: String,
    value: Array,
    level: Number,
    geoCoordMap: Array,
    hasDataProvinces: Array,
    hasDataCitys: Array,
  },

  data() {
    return {
      dom: null,
      option: null,
      Chart: null
    }
  },
  mixins: [Mixin],

  watch: {
    value: {
      handler (val, oldVal) {
        this.value = val
        this.initEcharts(this.mapName)
      },
      deep: true
    }
  },

  mounted() {
    this.Chart = echarts.getInstanceByDom(this.$refs.dom)
    this.$nextTick(() => {
      this.initEcharts(this.mapName)
    })
    console.log(echarts.getMap('湖南').geoJson.features)
  },

  methods: {
    resize() {
      echarts.getInstanceByDom(this.$refs.dom).resize()
    },

    initEcharts(val) {
      console.log('initEcharts-val: ', val)
      let mydata = val == 'china' ? this.hasDataProvinces : this.hasDataCitys
      if (!this.$refs.dom) {
        return false
      }
      var that = this
      this.option = {
        color: ['#132c6c', '#31357f', '#0d5180'],
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          trigger: 'item',
          padding: 0,
          backgroundColor: 'none',
          formatter: function (params) {
            if (params.data) {
              return `
                <div class="line-h-28 echarts-tooltip">
                  <p class="font-16 pb-5">${params.data.name}</p>
                  <p><span class="label">客户数量：</span><span class="text-warning2 font-16 font-weight pr-5">${params.data.companyCount}</span>家</p>
                  <p><span class="label">人事代理：</span><span class="text-warning2 font-16 font-weight pr-5">${params.data.agentCount}</span>家</p>
                  <p><span class="label">劳务派遣：</span><span class="text-warning2 font-16 font-weight pr-5">${params.data.laborDispatchCount}</span>家</p>
                  <p><span class="label">劳务外包：</span><span class="text-warning2 font-16 font-weight pr-5">${params.data.outsourcingCount}</span>家</p>
                  <p><span class="label">就业人数：</span><span class="text-warning2 font-16 font-weight pr-5">${params.data.empCount}</span>人</p>
                  <p><span class="label">在职：</span><span class="text-warning2 font-16 font-weight pr-5">${params.data.beHiringCount}</span>人</p>
                  <p><span class="label">离职：</span><span class="text-warning2 font-16 font-weight pr-5">${params.data.noBeHiringCount}</span>人</p>
                </div>
              `
            } else {
              return `
                <div class="line-h-28">${params.name} 暂无数据</div>
              `
            }
          }
        },
        visualMap: {
          //图例值控制
          show: true,
          type: "piecewise",
          // type: "continuous",
          // min: 1,
          // max: 500,
          top: '48%',
          right: '25%',
          // seriesIndex: 1,
          text: ['客户数量（家）'],
          textStyle: {
            color: '#fff'
          },
          inRange: {
            color: ['#132c6c', '#894eb7'],
            // color: ['#70ff40', '#ffff40', '#ff7f00', '#ff4040']
          },
          pieces: [
            {
              min: 200,
              label: '> 200'
            }, // 不指定 max，表示 max 为无限大（Infinity）。
            {
              min: 101,
              max: 200,
              label: '101 - 200'
            },
            {
              min: 51,
              max: 100,
              label: '51 - 100'
            },
            {
              min: 10,
              max: 50,
              label: '10 - 50'
            },
            {
              max: 10,
              label: '< 10'
            }
          ],

          showLabel: true,
          calculable: true
        },
        geo: {
          map: val,
          show: true,
          zoom: .8,
          roam: false,
          top: '11%',
          itemStyle: {
            normal: {
              // show: "true",
              areaColor: '#11254d',
              borderColor: "rgba(50, 85, 200, 1)",
              shadowColor: 'rgba(66, 125, 249, .6)',
              shadowBlur: 20
            },
            emphasis: {
              show: "false",
              color: "#173061" //悬浮背景
            }
          },
          z: 2
        },
        legend: {
          orient: "vertical",
          top: "20",
          left: "center",
          align: "right",
          //  data: [],
          textStyle: {
            color: "#fff",
            fontSize: 20
          },
          itemWidth: 50,
          itemHeight: 30,
          selectedMode: "multiple"
        },
        series: [
          {
            type: "map",
            map: val,
            zoom: .8,
            top: '10%',
            // aspectScale: .5,
            roam: false,
            label: {
              normal: {
                color: '#fff',
                show: true,
                formatter: function (params) {
                  // return params.data ? params.data.fullName : params.name
                  return params.name
                }
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#0d5180',
                borderColor: "#0ab0a8", //省市边界线
                shadowColor: "rgba(0, 13, 110, .3)",
                shadowBlur: 5
              },
              emphasis: {
                areaColor: "#ead880",
                borderColor: "#70ff40"
              }
            },
            zlevel: 1,
            data: this.value
          },
          {
            // type: 'effectScatter', // 带涟漪的散点图
            type: 'scatter',
            coordinateSystem: 'geo',
            // legendHoverLink: true,         
            // visualMap: false,
            // symbol: 'none',
            // 安博LOGO(K)
            symbol: 'image://',
            // 零工LOGO(V蓝)
            // symbol: 'image://',
            // 零工LOGO(V黄)
            // symbol: 'image://',
            symbolSize: 16,
            // large: true,
            // showEffectOn: 'render',
            hoverAnimation: false,
            rippleEffect: {
              brushType: 'stroke'
            },
            symbolOffset: [0, '-90%'],
            itemStyle: {
              // color: '#f60',
              // opacity: 0.5
            },
            zlevel: 2,
            tooltip: {
              show: false
            },
            label: {
              show: false,
              color: '#fff',
              backgroundColor: 'transparent',
              formatter: function (params) {
                return params.name
              },
              position: 'bottom'
            },
            silent: true,
            // data: this.geoCoordMap // 坐标散点（单个）
            data: mydata
          },
        ]
      }
      // this.Chart = echarts.getInstanceByDom(this.$refs.dom)
      if (!this.Chart) {
        this.Chart = echarts.init(this.$refs.dom)
      } else {
        this.Chart.clear()
      }
      this.Chart.setOption(this.option, {
        notMerge: true
      })
      this.Chart.off('click')
      this.Chart.on("click", function(params) {
        // that.geoCoordMap = []
        console.log(params)
        if (!that.level) {
          that.$emit('change-data', {
            level: 1,
            mapName: params.name
          })
          that.Chart.clear()
          that.initEcharts(params.name)
        } else {
          return false
        }
      })
      on(window, "resize", this.resize)
    }
  },

  beforeDestroy() {
    console.log("销毁实例")
    let dcharts = echarts.getInstanceByDom(this.$refs.dom)
    if (dcharts) {
      echarts.dispose(dcharts)
    }
    // this.dom = null
    off(window, "resize", this.resize)
  }
}
</script>

<style lang="less" scoped>
.chart-china {
  background-image: "url(../../../assets/images/BG.png)";
}
</style>
